<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动审核 - 城会玩管理后台</title>
    {% load static %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .activity-header {
            background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .status-badge {
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }
        .info-card {
            border-left: 4px solid #FF8C42;
        }
        .action-buttons {
            position: sticky;
            top: 20px;
        }
        .section-title {
            border-bottom: 2px solid #FF8C42;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
            color: #2D3047;
        }

        .timeline {
            position: relative;
            padding-left: 20px;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 1rem;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #6c757d;
            border: 2px solid white;
        }

        .timeline-item.active::before {
            background-color: #FF8C42;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            left: -15px;
            top: 17px;
            width: 2px;
            height: calc(100% + 1rem);
            background-color: #e9ecef;
        }

        .timeline-item:last-child::after {
            display: none;
        }

        .timeline-content {
            padding-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <nav class="navbar navbar-light bg-white shadow-sm">
        <div class="container-fluid">
            <a class="navbar-brand" href="javascript:history.back();" id="backBtn">
                <i class="bi bi-arrow-left"></i> 返回管理后台
            </a>
            <div class="navbar-text">
                活动审核详情
            </div>
        </div>
    </nav>

    <!-- 活动头部信息 -->
    <div class="activity-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="display-6 fw-bold">{{ activity.title }}</h1>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <span class="badge bg-light text-dark">
                            <i class="bi bi-person"></i> {{ activity.organizer.username }}
                        </span>
                        <span class="badge bg-light text-dark">
                            <i class="bi bi-tag"></i> {{ activity.category.name }}
                        </span>
                        <span class="badge status-badge
                            {% if activity.status == 'published' %}bg-success
                            {% elif activity.status == 'pending' %}bg-warning text-dark
                            {% elif activity.status == 'draft' %}bg-secondary
                            {% elif activity.status == 'cancelled' %}bg-danger
                            {% else %}bg-info{% endif %}">
                            {{ activity.get_status_display }}
                        </span>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="btn-group action-buttons">
                        {% if activity.status == 'pending' %}
                        <button type="button" class="btn btn-success btn-lg" data-bs-toggle="modal" data-bs-target="#approveModal">
                            <i class="bi bi-check-lg"></i> 批准活动
                        </button>
                        <button type="button" class="btn btn-warning btn-lg" data-bs-toggle="modal" data-bs-target="#rejectModal">
                            <i class="bi bi-x-lg"></i> 拒绝活动
                        </button>
                        {% endif %}
                        <button type="button" class="btn btn-danger btn-lg" data-bs-toggle="modal" data-bs-target="#deleteModal">
                            <i class="bi bi-trash"></i> 删除活动
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mb-5">
        <div class="row">
            <!-- 主要内容 -->
            <div class="col-lg-8">
                <!-- 活动图片 -->
                <div class="card mb-4">
                    <div class="card-body p-0">
                        {% if activity.image %}
                        <img src="{{ activity.image.url }}" class="img-fluid rounded" alt="{{ activity.title }}" style="max-height: 400px; width: 100%; object-fit: cover;">
                        {% else %}
                        <div class="text-center py-5 bg-light">
                            <i class="bi bi-image" style="font-size: 3rem; color: #6c757d;"></i>
                            <p class="mt-2 text-muted">暂无图片</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- 活动描述 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h3 class="section-title mb-0"><i class="bi bi-text-paragraph"></i> 活动描述</h3>
                    </div>
                    <div class="card-body">
                        <p class="card-text">{{ activity.description|linebreaks }}</p>
                    </div>
                </div>

                <!-- 活动亮点 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h3 class="section-title mb-0"><i class="bi bi-stars"></i> 活动亮点</h3>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            {% for highlight in activity.highlights.splitlines %}
                            {% if highlight.strip %}
                            <li class="list-group-item border-0 px-0">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                {{ highlight }}
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <!-- 行程安排 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h3 class="section-title mb-0"><i class="bi bi-clock"></i> 行程安排</h3>
                    </div>
                    <div class="card-body">
                        <ol class="list-group list-group-numbered">
                            {% for schedule in activity.schedule.splitlines %}
                            {% if schedule.strip %}
                            <li class="list-group-item border-0 px-0">{{ schedule }}</li>
                            {% endif %}
                            {% endfor %}
                        </ol>
                    </div>
                </div>

                <!-- 注意事项 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h3 class="section-title mb-0"><i class="bi bi-exclamation-triangle"></i> 注意事项</h3>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            {% for note in activity.notes.splitlines %}
                            {% if note.strip %}
                            <li class="list-group-item border-0 px-0">
                                <i class="bi bi-info-circle-fill text-warning me-2"></i>
                                {{ note }}
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 侧边栏信息 -->
            <div class="col-lg-4">
                <!-- 基本信息卡片 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0"><i class="bi bi-info-circle"></i> 基本信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong><i class="bi bi-calendar-event me-2"></i>开始时间</strong>
                            <p class="mb-0">{{ activity.start_time|date:"Y年m月d日 H:i" }}</p>
                        </div>
                        <div class="mb-3">
                            <strong><i class="bi bi-calendar-check me-2"></i>结束时间</strong>
                            <p class="mb-0">{{ activity.end_time|date:"Y年m月d日 H:i" }}</p>
                        </div>
                        <div class="mb-3">
                            <strong><i class="bi bi-geo-alt me-2"></i>活动地点</strong>
                            <p class="mb-0">{{ activity.location_name }}</p>
                            <small class="text-muted">{{ activity.address }}</small>
                        </div>
                        <div class="mb-3">
                            <strong><i class="bi bi-people me-2"></i>参与人数</strong>
                            <p class="mb-0">{{ activity.current_participants }} / {{ activity.max_participants }}</p>
                        </div>
                        <div>
                            <strong><i class="bi bi-eye me-2"></i>浏览统计</strong>
                            <p class="mb-0">浏览数: {{ activity.views }} | 分享数: {{ activity.shares }}</p>
                        </div>
                    </div>
                </div>

                <!-- 组织者信息 -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0"><i class="bi bi-person"></i> 组织者信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0">
                                {% if activity.organizer.avatar %}
                                <img src="{{ activity.organizer.avatar.url }}" alt="{{ activity.organizer.username }}" class="rounded-circle" width="50" height="50">
                                {% else %}
                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="bi bi-person text-white"></i>
                                </div>
                                {% endif %}
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0">{{ activity.organizer.username }}</h6>
                                <small class="text-muted">{{ activity.organizer.email }}</small>
                            </div>
                        </div>
                        <div class="d-grid gap-2">
                            <a href="mailto:{{ activity.organizer.email }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-envelope"></i> 发送邮件
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 活动状态时间线 -->
                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0"><i class="bi bi-clock-history"></i> 活动时间线</h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            <div class="timeline-item {% if activity.created_at %}active{% endif %}">
                                <div class="timeline-content">
                                    <small class="text-muted">创建时间</small>
                                    <p class="mb-0">{{ activity.created_at|date:"Y-m-d H:i" }}</p>
                                </div>
                            </div>
                            <div class="timeline-item {% if activity.updated_at and activity.updated_at != activity.created_at %}active{% endif %}">
                                <div class="timeline-content">
                                    <small class="text-muted">最后更新</small>
                                    <p class="mb-0">{{ activity.updated_at|date:"Y-m-d H:i" }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 批准活动模态框 -->
    <div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">批准活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确定要批准活动 <strong>"{{ activity.title }}"</strong> 吗？</p>
                    <p class="text-muted">批准后活动将对所有用户可见。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="confirmApproveBtn">确认批准</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 拒绝活动模态框 -->
    <div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">拒绝活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="rejectForm">
                        <div class="mb-3">
                            <label for="rejectReason" class="form-label">拒绝原因</label>
                            <textarea class="form-control" id="rejectReason" name="reason" rows="4" placeholder="请详细说明拒绝此活动的原因..." required>活动内容不符合社区规范</textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-warning" id="confirmRejectBtn">确认拒绝</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除活动模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>警告：此操作不可逆！</strong>
                    </div>
                    <p>确定要删除活动 <strong>"{{ activity.title }}"</strong> 吗？</p>
                    <p class="text-muted">活动将被永久删除，所有相关记录也会被清除。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 批准活动
            document.getElementById('confirmApproveBtn').addEventListener('click', function() {
                approveActivity({{ activity.id }});
            });

            // 拒绝活动
            document.getElementById('confirmRejectBtn').addEventListener('click', function() {
                const reason = document.getElementById('rejectReason').value.trim();
                if (!reason) {
                    alert('请填写拒绝原因');
                    return;
                }
                rejectActivity({{ activity.id }}, reason);
            });

            // 删除活动
            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                deleteActivity({{ activity.id }});
            });
        });

        function approveActivity(activityId) {
            fetch(`/user/admin/approve_activity/${activityId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    // 返回来源页面或默认返回admin_index
                    const referrer = document.referrer;
                    if (referrer && (referrer.includes('admin_index') || referrer.includes('admin_dashboard'))) {
                        window.location.href = referrer;
                    } else {
                        window.location.href = "{% url 'admin_index' %}?tab=activities";
                    }
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function rejectActivity(activityId, reason) {
            fetch(`/user/admin/reject_activity/${activityId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `reason=${encodeURIComponent(reason)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    // 返回来源页面或默认返回admin_index
                    const referrer = document.referrer;
                    if (referrer && (referrer.includes('admin_index') || referrer.includes('admin_dashboard'))) {
                        window.location.href = referrer;
                    } else {
                        window.location.href = "{% url 'admin_index' %}?tab=activities";
                    }
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function deleteActivity(activityId) {
            fetch(`/user/admin/delete_activity/${activityId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    // 返回来源页面或默认返回admin_index
                    const referrer = document.referrer;
                    if (referrer && (referrer.includes('admin_index') || referrer.includes('admin_dashboard'))) {
                        window.location.href = referrer;
                    } else {
                        window.location.href = "{% url 'admin_index' %}?tab=activities";
                    }
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    </script>
</body>
</html>